<template>
  <view class="page">
    <!-- 顶部状态 -->
    <view class="status-wrap">
      <image class="status-icon" src="/static/icons/clock.png" mode="widthFix"></image>
      <text class="status-text">待支付</text>
    </view>

    <!-- 主卡片 -->
    <view class="card">
      <view class="seg-title">{{data_info.ddlx}}</view>
      <view class="time-row">
        <view class="time-col">
          <text class="time-sub"></text>
          <text class="time-main">{{data_info.ddkssj}}</text>
        </view>
        <view class="time-center"><text class="time-center-text">{{ rentDays }}天</text></view>
        <view class="time-col right">
          <text class="time-sub"></text>
          <text class="time-main">{{data_info.ddjssj}}</text>
        </view>
      </view>

      <view class="info-row"><text class="label">押　金：</text><text class="value">{{ data_info.yjje }}元</text>
		<text class="extra red" v-if="data_info.ddzt == '待支付押金'" @tap="pay_yajin()">去支付押金</text>
		<text class="extra red" v-else style="color: #009966;">已支付</text>
	  </view>
      <view class="info-row"><text class="label">租　金：</text><text class="value">{{ data_info.jine }}元</text></view>
      <view class="info-row"><text class="label">名　字：</text><text class="value">{{ data_info.shrxm || '测试姓名' }}</text></view>
      <view class="info-row"><text class="label">联系电话：</text><text class="value">{{ data_info.shrlxdh || '18888888888' }}</text></view>

      <view class="info-row station">
        <text class="label">附近站点：</text>
        <view class="station-main">
          <view class="station-left">
            <image class="pin" src="https://kehu-1256834579.cos.ap-shanghai.myqcloud.com/weier/dingwei.png" />
            <text class="name">{{ data_info.ztdmc }}</text>
            <text class="dist">{{ curStation.distance }}</text>
          </view>
          <view class="station-right">
            <view class="btn ghost" @tap="callStation">联系电话</view>
            <view class="btn primary" @tap="navToStation">A导航</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 合计 -->
    <view class="total">合计：<text class="money">￥{{ data_info.jine }}</text></view>

    <!-- 底部按钮 -->
    <view class="footer">
      <button class="submit" @tap="sub_order()">去支付</button>
    </view>
  </view>
</template>

<script>
import common_config from '../../static/js/common.js';
var config = common_config.config;
var that;	
var userInfo;
export default {
  data(){
    const now = new Date(); now.setHours(0,0,0,0)
    return {
      mode:'ziti',
      startDate: now,
      endDate: new Date(now.getTime()+6*86400000),
      rentDays: 7,
      deposit: 1000,
      unitRent: 300/7,
      form:{ name:'林某某', mobile:'18888888888' },
      stations:[ { id:1, name:'服务商A', distance:'0.5km', phone:'13800000000', latitude:31.23, longitude:121.47 } ],
      curStationIdx: 0,
	  czddRowid:'',
	  yajinRowid:'',
	  zujinRowid:'',
	  rowId:'',
	  data_info:{},
	  pay_order:''
    }
  },
  onLoad(options) {
  	that = this;
  	that.rowId = options.rowid;
	that.czddRowid = options.czddRowid;
	that.yajinRowid = options.yajinRowid;
	that.zujinRowid = options.zujinRowid;
  	that.center = uni.getStorageSync('location_center');
  	//console.log(that.center);
  	that.center = JSON.parse(that.center);
  	that.plusReady();
  },
  computed:{
    curStation(){ return this.stations[this.curStationIdx] },
    rent(){ return Math.ceil(this.unitRent * this.rentDays) },
    total(){ return common_config.accAdd(this.data_info.jine,this.data_info.yjje) }
  },
  methods:{
	  //初始化
	  plusReady(){
	    	userInfo = uni.getStorageSync('userInfo');
	    	if(userInfo){
	    		userInfo = JSON.parse(userInfo);
	    		that.if_login = true;
	    		that.member_profile = userInfo;
	  				that.load_datas();
					that.load_pay_data();
	    	}else{
	  				uni.switchTab({
	  					url:'/pages/index/me'
	  				});
	    		that.if_login = false;
	    	}
	    	
	  },
	load_datas(){
		//console.log(121212);
		uni.request({
		  url: config.request_url+'/v2/open/worksheet/getRowByIdPost',
		  method: 'POST',
		  header: {
			'Content-Type': 'application/json'
		  },
		  data: {
			"appKey": config.appKey,
			"sign": config.sign,
			"worksheetId": "czddgl",
			"rowId":that.czddRowid
		  },
		  success: (res) => {
			//console.log('返回结果:', res.data);
			res = res.data;
			//console.log(res);
			if(res.success){
				that.data_info = res.data;
				
			}else{
				 uni.showToast({ title: res.data.msg || '数据获取失败', icon: 'none' });
			}
		  },
		  fail: (err) => {
			console.error('请求失败:', err);
			uni.showToast({ title: '网络错误', icon: 'none' });
		  }
		})  
	},
	load_pay_data(){
		//console.log(121212);
		uni.request({
		  url: config.request_url+'/v2/open/worksheet/getFilterRows',
		  method: 'POST',
		  header: {
			'Content-Type': 'application/json'
		  },
		  data: {
			"appKey": config.appKey,
			"sign": config.sign,
			"worksheetId": "zfjl",
			"pageSize": 50,
			"pageIndex": 1,
			"filters": [
				{
					"controlId": "rowid",
					"dataType": 2,
					"spliceType": 1,
					"filterType": 2,
					"value": that.zujinRowid// 支付记录rowid ，多条记录用英文逗号隔开
				}
			]
		  },
		  success: (res) => {
			//console.log('返回结果:', res.data);
			res = res.data;
			//console.log(res);
			if(res.success){
				//that.data_info = res.data;
				that.pay_order = res.data.rows[0].zfjlbh;
				//common_config.calert(that.pay_order);
			}else{
				 uni.showToast({ title: res.data.msg || '数据获取失败', icon: 'none' });
			}
		  },
		  fail: (err) => {
			console.error('请求失败:', err);
			uni.showToast({ title: '网络错误', icon: 'none' });
		  }
		})  
	},
	pay_yajin(){
		uni.navigateTo({
			url:'/pages/index/yajin?czddRowid='+that.czddRowid+'&yajinRowid='+that.yajinRowid+'&zujinRowid='+that.zujinRowid+'&rowid='+that.rowId+'&money='+that.data_info.yjje
		});
	},
	//提交支付
	sub_order(){
		if(that.data_info.ddzt == '待支付押金'){
			common_config.calert('请先前往支付押金');
			return false;
		}
		uni.showLoading({
			title:'正在提交支付...'
		})
	  uni.request({
	    url: config.weixin_url+'/api/Login/GetWxPrepayId',
	    method: 'POST',
	    header: { 'Content-Type': 'application/json' },
	    data: {
	      openId:userInfo.openid,
		  totalMoney:common_config.accMul(that.data_info.jine,100),
		  billNo:that.pay_order,
		  title:'押金',
		  sign:'123455'
	    },
	    success: (res) => {
			uni.hideLoading();
	      res = res.data;
	     if(res.status == 200){
			 var datas = res.response;
			 uni.requestPayment({
			 	provider: 'wxpay',
			 	orderInfo: that.pay_order,
			 	timeStamp:datas.timeStamp,
			 	nonceStr:datas.nonceStr,
			 	package:datas.package,
			 	signType:datas.signType,
			 	paySign:datas.paySign,
			 	success: function () {
			 		uni.redirectTo({ url:'pay_suc?czddRowid='+that.czddRowid+'&yajinRowid='+that.yajinRowid+'&zujinRowid='+that.zujinRowid+'&rowid='+that.rowId });
			 	},
			 	fail: function (err) {
			 		console.log(err);
			 		common_config.calert('支付失败');
			 	}
			 });
		 }else{
			 common_config.calert(res.msg);
		 }
	    },
	    fail: (err) => {
	      console.error('请求失败:', err);
	      uni.showToast({ title: '网络错误', icon: 'none' });
	    }
	  })  
	},
    pad2(n){ return (''+n).padStart(2,'0') },
    mdText(d){ if(!d) return '--'; const dt=new Date(d); return `${this.pad2(dt.getMonth()+1)}月${this.pad2(dt.getDate())}日` },
    weekdayText(d){ if(!d) return ''; return ['日','一','二','三','四','五','六'][new Date(d).getDay()] },
    isToday(d){ if(!d) return false; const a=new Date(); a.setHours(0,0,0,0); const b=new Date(d); b.setHours(0,0,0,0); return a.getTime()===b.getTime() },
    callStation(){ const tel=this.curStation.phone; uni.makePhoneCall({phoneNumber:tel}) },
    navToStation(){ const s=this.curStation; uni.openLocation({ latitude:s.latitude, longitude:s.longitude, name:s.name }) }
  }
}
</script>

<style lang="scss" scoped>
.page{ background:#f6f6f6; min-height:100vh; padding-bottom:160rpx; }
.status-wrap{ text-align:center; padding:60rpx 0 40rpx; background:linear-gradient(#cfe9ff,#f6f6f6); }
.status-icon{ width:64rpx; height:64rpx; display:inline-block; margin-bottom:12rpx; }
.status-text{ font-size:34rpx; font-weight:800; color:#0a67b8; }

.card{ margin:20rpx; background:#fff; border-radius:20rpx; padding:20rpx; box-shadow:0 6rpx 20rpx rgba(0,0,0,.06); }
.seg-title{ text-align:center; font-size:30rpx; font-weight:700; padding-bottom:20rpx; color:#222; }

.time-row{ background:#f7f8fa; border-radius:16rpx; padding:18rpx; display:flex; align-items:center; justify-content:space-between; margin-bottom:20rpx; }
.time-col{ width:40%; }
.time-col.right{ text-align:right; }
.time-sub{ display:block; color:#8a8f97; font-size:24rpx; }
.time-main{ display:block; color:#1f2329; font-size:32rpx; font-weight:800; margin-top:6rpx; }
.time-center{ width:20%; text-align:center; font-size:26rpx; color:#8a8f97; }

.info-row{ display:flex; align-items:center; padding:16rpx 0; font-size:28rpx; border-bottom:1rpx solid #f2f2f2; }
.label{ width:160rpx; color:#6c727a; }
.value{ flex:1; color:#1f2329; }
.extra{ font-size:24rpx; margin-left:10rpx; }
.red{ color:#ff2d2d; }

.station{ flex-direction:column; align-items:flex-start; border-bottom:none; }
.station-main{ display:flex; justify-content:space-between; align-items:center; width:100%; margin-top:12rpx; background:#f7f8fa; border-radius:14rpx; padding:14rpx; }
.station-left{ display:flex; align-items:center; gap:8rpx; }
.pin{ width:32rpx; height:32rpx; }
.name{ font-size:30rpx; font-weight:700; }
.dist{ font-size:22rpx; background:#e9f4ff; color:#0a67b8; padding:4rpx 10rpx; border-radius:8rpx; margin-left:8rpx; }
.station-right{ display:flex; gap:12rpx; }
.btn{ min-width:140rpx; text-align:center; padding:12rpx 16rpx; border-radius:12rpx; font-size:26rpx; }
.btn.ghost{ background:#eef2f5; color:#333; }
.btn.primary{ background:#0a67b8; color:#fff; }

.total{ text-align:right; font-size:32rpx; padding:20rpx; color:#333; }
.money{ color:#ff2d2d; font-weight:800; }

.footer{ position:fixed; left:0; right:0; bottom:0; background:#fff; padding:20rpx 20rpx env(safe-area-inset-bottom); border-top:1rpx solid #eee; }
.submit{ width:100%; height:92rpx; line-height:92rpx; background:#0a67b8; color:#fff; border-radius:16rpx; font-size:32rpx; font-weight:800; text-align:center; }
</style>
